<template>
  <div class="df aic jcsb ">
    <p class="main_text">危固废统计</p>
    <el-button class="pf "   type="primary" @click="backHome">返回首页</el-button>
  </div>
  <div class="main  df fdc" style="z-index: 200;background-color: #e8eef4;">
    <el-row :gutter="10" >
      <el-col :span="12"  :lg="12" :md="12" :sm="24" :xs="24" style="margin-top: 10px;">
        <div class="top_li br8 p10" style="background-color: white">
          <div class="df aic jcsb">
            <div style="font-size: 0.875rem">最近危固废入库记录</div>
            <div style="color: #b2b2b2; font-size: 0.75rem">
              最近更新：{{ wasteInboundDate }}
            </div>
          </div>
          <el-table
            :data="inbundDataArr"
            style="width: 100%"
            class="mt10"
            :header-cell-style="{ background: '#000' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              prop="content.hazardousWasteId"
              label="废料编号"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="content.hazardousWasteName"
              label="废料名称"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="num"
              label="入库数量"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="content.warehouseName"
              label="入库仓库"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="content.warehouseArea"
              label="入库区域"
              :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
      </el-col>
      <el-col :span="12"  :lg="12" :md="12" :sm="24" :xs="24" style="margin-top: 10px;">
        <div class="top_li br8 p10" style="background-color: white">
          <div class="df aic jcsb">
            <div style="font-size: 0.875rem">最近危固废出库记录</div>
            <div style="color: #b2b2b2; font-size: 0.75rem">
              最近更新：{{ wasteOutboundDate }}
            </div>
          </div>
          <el-table
            :data="outbundDataArr"
            style="width: 100%"
            class="mt10"
            :header-cell-style="{ background: '#000' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              prop="content.hazardousWasteId"
              label="废料编号"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="content.hazardousWasteName"
              label="废料名称"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="num"
              label="出库数量"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="content.warehouseName"
              label="出库仓库"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="content.warehouseArea"
              label="出库区域"
              :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" >
      <el-col :span="6"  :lg="6" :md="6" :sm="24" :xs="24" style="margin-top: 10px;">
        <div class="content  ">
        <div class="left p10 br8" style="height: 100%">
          <div class="df aic jcsb">
            <div style="font-size: 0.875rem">危固废统计</div>
          </div>
          <div style="height: 96%" class="df fdc jcsa">
            <div class="left_l">
                  <waste_echarts_1></waste_echarts_1>
              <div class="df jcsb left_l_b">
                <p>库存机油总量</p>
                <p>{{ engine }}</p>
              </div>
            </div>
            <div class="left_l">
                  <waste_echarts_2></waste_echarts_2>
              <div class="df jcsb left_l_b">
                <p>库存汽油总量</p>
                <p>{{ gasoline }}</p>
              </div>
            </div>
            <div class="left_l">
                  <waste_echarts_3></waste_echarts_3>
              <div class="df jcsb left_l_b">
                <p>库存柴油总量</p>
                <p>{{ Diesel }}</p>
              </div>
            </div>
          </div>
        </div>
        </div>
      </el-col>
      <el-col :span="18"  :lg="18" :md="18" :sm="24" :xs="24" style="margin-top: 10px;">
        <div class="right df fdc jcsb">
          <div class="right_t br8" style="background-color: #FFFFFF">
            <div class="df aic jcsb">
              <div style="font-size: 0.875rem">危固废出入库趋势</div>
            </div>
            <div class="pr">
              <waste_echarts_4></waste_echarts_4>
            </div>
          </div>
          <div class="right_b br8" style="background-color: #FFFFFF;margin-top: 10px;">
            <div class="df aic jcsb">
              <div style="font-size: 0.875rem">危固废统计</div>
            </div>
            <div class="pr">
              <waste_echarts_5 :data="data"></waste_echarts_5>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
<!--    <div class="top df jcsb mb20">-->
<!--      <div class="top_li br8 p10">-->
<!--        <div class="df aic jcsb">-->
<!--          <div style="font-size: 0.875rem">最近危固废入库记录</div>-->
<!--          <div style="color: #b2b2b2; font-size: 0.75rem">-->
<!--            最近更新：{{ wasteInboundDate }}-->
<!--          </div>-->
<!--        </div>-->
<!--        <el-table-->
<!--          :data="inbundDataArr"-->
<!--          style="width: 100%"-->
<!--          class="mt10"-->
<!--          :header-cell-style="{ background: '#000' }"-->
<!--          :cell-style="{ textAlign: 'center' }"-->
<!--        >-->
<!--          <el-table-column-->
<!--            prop="content.hazardousWasteId"-->
<!--            label="废料编号"-->
<!--            :show-overflow-tooltip="true"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="content.hazardousWasteName"-->
<!--            label="废料名称"-->
<!--            :show-overflow-tooltip="true"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="num"-->
<!--            label="入库数量"-->
<!--            :show-overflow-tooltip="true"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="content.warehouseName"-->
<!--            label="入库仓库"-->
<!--            :show-overflow-tooltip="true"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="content.warehouseArea"-->
<!--            label="入库区域"-->
<!--            :show-overflow-tooltip="true"-->
<!--          />-->
<!--        </el-table>-->
<!--      </div>-->
<!--      <div class="top_li br8 p10">-->
<!--        <div class="df aic jcsb">-->
<!--          <div style="font-size: 0.875rem">最近危固废出库记录</div>-->
<!--          <div style="color: #b2b2b2; font-size: 0.75rem">-->
<!--            最近更新：{{ wasteOutboundDate }}-->
<!--          </div>-->
<!--        </div>-->
<!--        <el-table-->
<!--          :data="outbundDataArr"-->
<!--          style="width: 100%"-->
<!--          class="mt10"-->
<!--          :header-cell-style="{ background: '#000' }"-->
<!--          :cell-style="{ textAlign: 'center' }"-->
<!--        >-->
<!--          <el-table-column-->
<!--            prop="content.hazardousWasteId"-->
<!--            label="废料编号"-->
<!--            :show-overflow-tooltip="true"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="content.hazardousWasteName"-->
<!--            label="废料名称"-->
<!--            :show-overflow-tooltip="true"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="num"-->
<!--            label="出库数量"-->
<!--            :show-overflow-tooltip="true"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="content.warehouseName"-->
<!--            label="出库仓库"-->
<!--            :show-overflow-tooltip="true"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="content.warehouseArea"-->
<!--            label="出库区域"-->
<!--            :show-overflow-tooltip="true"-->
<!--          />-->
<!--        </el-table>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div style="height: 1.25rem"></div>-->
<!--    <div class="content df jcsb">-->
<!--      <div class="left p10 br8">-->
<!--        <div class="df aic jcsb">-->
<!--          <div style="font-size: 0.875rem">危固废统计</div>-->
<!--        </div>-->
<!--        <div style="height: 96%" class="df fdc jcsa">-->
<!--          <div class="left_l">-->
<!--            <div class="df jcsb aic">-->
<!--              <div class="left_l_l pr">-->
<!--                <waste_echarts_1></waste_echarts_1>-->
<!--              </div>-->

<!--            </div>-->
<!--            <div class="df jcsb left_l_b">-->
<!--              <p>库存机油总量</p>-->
<!--              <p>{{ engine }}</p>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="left_l">-->
<!--            <div class="df jcsb aic">-->
<!--              <div class="left_l_l pr">-->
<!--                <waste_echarts_2></waste_echarts_2>-->
<!--              </div>-->

<!--            </div>-->
<!--            <div class="df jcsb left_l_b">-->
<!--              <p>库存汽油总量</p>-->
<!--              <p>{{ gasoline }}</p>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="left_l">-->
<!--            <div class="df jcsb aic">-->
<!--              <div class="left_l_l pr">-->
<!--                <waste_echarts_3></waste_echarts_3>-->
<!--              </div>-->

<!--            </div>-->
<!--            <div class="df jcsb left_l_b">-->
<!--              <p>库存柴油总量</p>-->
<!--              <p>{{ Diesel }}</p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--&lt;!&ndash;      <div class="right df fdc jcsb">&ndash;&gt;-->
<!--&lt;!&ndash;        <div class="right_t br8">&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="df aic jcsb">&ndash;&gt;-->
<!--&lt;!&ndash;            <div style="font-size: 0.875rem">危固废出入库趋势</div>&ndash;&gt;-->

<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="pr">&ndash;&gt;-->
<!--&lt;!&ndash;            <waste_echarts_4></waste_echarts_4>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--&lt;!&ndash;        <div class="right_b br8">&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="df aic jcsb">&ndash;&gt;-->
<!--&lt;!&ndash;            <div style="font-size: 0.875rem">危固废统计</div>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="pr">&ndash;&gt;-->
<!--&lt;!&ndash;            <waste_echarts_5 :data="data"></waste_echarts_5>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--    </div>-->
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref ,onMounted} from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { formatTime, formatTimeAll } from "@/filters/index";
import {
  RequestInboundGetlistlimit,
  RequestStatisticGetWasteScale,
  RequestOutboundGetlistlimit,
  RequestInboundFormGetByInbound,
  RequestOutboundFormGetByOutbound,
} from "@/api/path/index.js";
import { useRouter } from "vue-router";
const router = useRouter();
import waste_echarts_1 from "@/components/waste/waste_echarts_1.vue";
import waste_echarts_2 from "@/components/waste/waste_echarts_2.vue";
import waste_echarts_3 from "@/components/waste/waste_echarts_3.vue";
import waste_echarts_4 from "@/components/waste/waste_echarts_4.vue";
import waste_echarts_5 from "@/components/waste/waste_echarts_5.vue";

const data = ref<any>("asdasdad");
const engine = ref<any>(0); //机油
const gasoline = ref<any>(0); //汽油
const Diesel = ref<any>(0); //柴油
const inbundDataArr = ref<any>([]); //危固废入库
const outbundDataArr = ref<any>([]); //危固废出库
const wasteAll = ref<any>(0);
const wasteInboundDate = ref<any>();
const wasteOutboundDate = ref<any>("");
const getData = () => {
  /* 入库统计 */
  RequestInboundGetlistlimit({
    page: 1,
    rows: 1,
    contentType: 2,
  }).then((res: any) => {
    RequestInboundFormGetByInbound(res.resultObj.data[0].inboundId).then(
      (ress: any) => {
        inbundDataArr.value = ress.resultObj.data;
        wasteInboundDate.value = formatTimeAll(ress.resultObj.inboundDate);
      }
    );
  });

  /* 出库统计 */

  RequestOutboundGetlistlimit({
    page: 1,
    rows: 1,
    contentType: 2,
  }).then((res: any) => {
    RequestOutboundFormGetByOutbound(res.resultObj.data[0].outboundId).then(
      (ress: any) => {
        wasteOutboundDate.value = formatTimeAll(ress.resultObj.outboundDate);
        outbundDataArr.value = ress.resultObj.data;
        console.log("outbundDataArr.value", ress.resultObj.outboundDate);
      }
    );
  });
  RequestStatisticGetWasteScale().then((res: any) => {
    res.resultObj.forEach((item: any) => {
      //   console.log(item);
      if (item.name == "机油") {
        engine.value = item.value;
      } else if (item.name == "汽油") {
        gasoline.value = item.value;
      } else if (item.name == "柴油") {
        Diesel.value = item.value;
      } else {
        wasteAll.value += item.value;
      }
    });
  });

};

getData();
/* 返回首页 */
const backHome = () => {
  router.push("/Home");
};
// // 屏幕宽度
// const windowWidth = ref(0)
// // 屏幕高度
// const windowHeight = ref(0)
// const width = ref<any>()
// const height = ref<any>()
// const heightBody = ref<any>()
// // 生命周期
// onMounted(() => {
//     getWindowResize()
//     window.addEventListener('resize', getWindowResize)
// })
// // 获取屏幕尺寸
// const getWindowResize = function () {
//     windowWidth.value = window.innerWidth
//     windowHeight.value = window.innerHeight
//     if (windowHeight.value <= 786) {
//         height.value = '471.5904px'
//         // heightBody.value = '484.8px'
//     } else {
//         height.value = '60%'
//         heightBody.value = '60%'
//     }
//     if (windowWidth.value <= 1542) {
//         width.value = '1276px'
//     } else {
//         width.value = '100%'
//     }
// }
</script>

<style scoped lang="scss">
.main {
  //width: v-bind(width);
  //height: 768px;
  //overflow-y: auto;
  .top {
    width: 100%;
    .top_li {
      width: calc(50% - 0.625rem);
      background-color: #fff;
    }
  }

  .content {
    width: 100%;
     height: 100%;
    flex: 1;

    .left {
      //width: calc(26% - 10px);
      background-color: #fff;

      .left_l {
        //width: 100%;
        // height: 32%;

        .left_l_b {
          padding: 0.625rem 1.25rem;
          background-color: #f5f7fa;
          border-radius: 0.3125rem;
          margin-top: 1.25rem;

          p {
            &:first-child {
              color: #4e5969;
              font-size: 0.875rem;
            }

            &:last-child {
              color: #000;
              font-size: 1rem;
            }
          }
        }

        .left_l_l {
          width: 100%;
          height: 6.25rem;
          display: flex;
          align-items: center;
        }
      }
    }

    .right {
      //width: calc(74% - 10px);
      height: 100%;

      .right_t {
        width: 100%;
        height: calc(56% - 10px);
        background-color: #fff;
      }

      .right_b {
        width: 100%;
        height: calc(44% - 10px);
        background-color: #fff;
      }
    }
  }
}

.listStyle {
  width: 50%;
  height: 100%;
  border-right: 0.0625rem dashed #ccc;

  &:last-child {
    border-right: none;
  }
}

::v-deep .el-table th {
  text-align: center;
  background-color: #f6f8fa !important;
  border-right: 0.0625rem solid #fff;
  color: #ffffff;

  &:first-child {
    border-radius: 0.625rem 0rem 0rem 0.625rem;
  }

  &:last-child {
    border-radius: 0rem 0.625rem 0.625rem 0rem;
  }
}

.custom-dropdown .el-dropdown-link {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

::v-deep .el-dropdown {
  color: #b2b2b2;
  font-size: 0.75rem;
}

::v-deep .el-radio-group {
  background-color: #f6f8fa;
  border: 0.125rem solid #f6f8fc;
}

::v-deep .el-radio-button--small .el-radio-button__inner {
  background-color: rgba($color: #000000, $alpha: 0);
  border: none;
}

.el-dropdown-menu {
  overflow: scroll;
  max-height: 12.5rem;
  overflow-x: hidden;
}
</style>
